<template>
  <van-picker :columns="columns" value-key="label" ref="picker" @confirm="onConfirm">
    <div slot="columns-bottom"
         class="btnGroup">
      <van-button class="btnCancel" @click="btnCancel">
        取消
      </van-button>
      <van-button type="primary"
                  class="btnOk"
                  @click="btnOk">
        确认
      </van-button>
    </div>
  </van-picker>
</template>

<script>
export default {
  name: 'Picker',
  props: {
    columns: {
      type: Array,
      required: true
    }
  },
  components: {

  },
  data () {
    return {
      currentIndexs: []
    }
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {
    this.currentIndexs = this.$refs.picker.getIndexes()
  },
  methods: {
    btnOk () {
      this.$refs.picker.confirm()
    },
    btnCancel () {
      this.$refs.picker.$parent.$parent.$parent.toggle(false)
      this.$refs.picker.setIndexes(this.currentIndexs)
    },
    onConfirm (value, index) {
      this.$refs.picker.$parent.$parent.$parent.toggle(false)
      this.$emit('updateData', index)
      this.currentIndexs = index
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
    }
  }
}
</script>

<style scoped lang="less">
  /deep/.van-ellipsis{
    font-size: 35px;
  }
  /deep/.btnGroup {
    display: flex;
    .btnCancel{
      height: 80px;
      width: 250px;
      font-size: 35px;
    }
    .btnOk{
      height: 80px;
      flex: 1;
      font-size: 35px;
    }
  }
</style>
